<template>
  <div class="img-num">
    <img v-for="(item, idx) in charImgs" :key="idx" :src="item" alt="" />
  </div>
</template>

<script>
export default {
  props: {
    num: {
      type: Number,
    },
    type: {
      type: String,
      default: "outer",
    },
  },
  data() {
    return {
      imgOuter: {
        0: require("@/assets/nums-outer/0.png"),
        1: require("@/assets/nums-outer/1.png"),
        2: require("@/assets/nums-outer/2.png"),
        3: require("@/assets/nums-outer/3.png"),
        4: require("@/assets/nums-outer/4.png"),
        5: require("@/assets/nums-outer/5.png"),
        6: require("@/assets/nums-outer/6.png"),
        7: require("@/assets/nums-outer/7.png"),
        8: require("@/assets/nums-outer/8.png"),
        9: require("@/assets/nums-outer/9.png"),
      },
      imgInner: {
        0: require("@/assets/nums-inner/0.png"),
        1: require("@/assets/nums-inner/1.png"),
        2: require("@/assets/nums-inner/2.png"),
        3: require("@/assets/nums-inner/3.png"),
        4: require("@/assets/nums-inner/4.png"),
        5: require("@/assets/nums-inner/5.png"),
        6: require("@/assets/nums-inner/6.png"),
        7: require("@/assets/nums-inner/7.png"),
        8: require("@/assets/nums-inner/8.png"),
        9: require("@/assets/nums-inner/9.png"),
      },
    };
  },
  computed: {
    charImgs: function () {
      let charImgs = [];
      if (this.num !== undefined) {
        let numStr = this.num + "";
        for (let i = 0; i < numStr.length; i++) {
          let charItem = numStr.charAt(i);
          let imgItem = this.imgOuter[charItem];
          if (this.type === "inner") {
            imgItem = this.imgInner[charItem];
          }
          charImgs.push(imgItem);
        }
      }
      return charImgs;
    },
  },
};
</script>

<style lang='scss' scoped>
.img-num {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    height: 33px;
  }
}
</style>